<template>
  <div class="addaddress">
    
     <!-- 顶部导航 -->
     <van-nav-bar
        title="新增地址"
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="$router.go(-1)"
      />
      <div>
        <span>联系人</span> <input type="text" placeholder="请输入姓名" v-model="newaddress.name"/>
      </div>
      <div>
        <span>电话</span><input type="text" placeholder="请输入手机号码"  v-model="newaddress.phone"/>
      </div>
      <div>
        <span>地址</span><input type="text" placeholder="请输入地址" v-model="newaddress.address"/>
      </div>
      <button @click="requset_address_add(newaddress)">点击添加地址</button>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from 'vuex'

import {address_add} from '../utils/api'
export default {
  data(){
    return {
      newaddress:{
        userid:this.$store.state.userid,
        address:'',
        phone:'',
        name:'',
      }
    }
  },
  computed:{
    // ...mapState(['userid']),
  },
  methods:{
    // 获取用户的userid
  //mapMutations()这个工具函数 会将vuex中的同步方法 映射到组件的methods中.
  ...mapMutations([]),
    //mapActions()这个工具函数 会将vuex中的异步方法 映射到组件的methods中.
    ...mapActions(['requset_address_add']),

}
}
</script>

<style lang="scss" scoped>
.addaddress{
  font-size: 18px;
  padding: 10px;
  div {
    width: 100%;
    line-height: 40px;
    border-bottom: 1px solid #f5f5f5;
    float: left;
    span{
      width: 80px;
      display: block;
      float: left;
      padding-left: 20px;
    }
    margin: 8px 0;
  }
  button{
    text-align: center;
    margin-top: 30px;
    border: 0;
    float: left;
    padding: 13px 56px;
    margin-left: 71px;
    font-size: 18px;
    &:first-child{
      background-color: lightskyblue;
    }
    &:last-child{
      background-color: lightcoral;
    }
  }
}


input{
  float: right;
  outline: none;
  border: none;
  width: 250px;
}
</style>